<template>
	<view>
		<view class="navtop">
			<image @click="back" src="../../static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
			<text class="balance">常见问题</text>
		</view>
		<view class="opinionBox">
			<textarea class="opinion" v-model="textarea_txt" maxlength="200" placeholder="请填写您对薪聚客的意见与建议或使用过程中所遇到的问题，帮助我们优化,字数不超过200!!!"></textarea>
			<view class="opinionImgBox">
				<text class="opinionFont">图片（提供意见与建议截图）</text>
				<text class="opinionImgnum">{{image_array.length}}/4</text>
			</view>
			<view class="picstyle">
				<view class="shangchuan " @click="choose_image">
					<image src="/static/task/undown.png" mode=""></image>
				</view>
				<view class="ml10" style="position: relative;" v-for="(item,index) in image_array" :key="index">
					<image :src="item" mode="" style="width: 150rpx;height: 150rpx;" @tap="_previewImage(item)"></image>
					<image src="/static/task/shanchu.png" style="width: 40rpx;height: 40rpx;position: absolute;top: -15rpx;right: -10rpx;"
					 mode="" @click="shanchu(index)"></image>
				</view>
			</view>
		</view>
		<view class="submit" @click="go_tijiao">提交反馈</view>
	</view>
</template>

<script>
	var _self;
	import Require from '@/common/require.js';
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				opinionImgnum: '0',
				image_array: [],
				url_href: '',
				textarea_txt:''
			};
		},
		methods: {
			go_tijiao(){
				var self=this
				if(self.textarea_txt==''){
					uni.showToast({
						icon: "none",
						image:"/static/user2/delete.png",
						title: "内容不能为空"
					})
				}else{
					self.go_list()
				}
			},
			go_list() {
				var self = this
				Require.commonRequest({
					url: '/api/member/feedback',
					method:"POST",
					data:{
						fb_content:self.textarea_txt,
						fb_imgs:self.image_array,
					},
					success: function(ret) {
						if(ret.data.code==200){
							uni.showToast({
								icon: "success",
								title: '提交成功'
							})
						}
					},
					fail: function() { 
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},
			
			
			
			
			
			
			
			
			
			
			//删除数据中的图片
			shanchu: function(index) {
				this.image_array.splice(index, 1);
			},
			//预览图片
			_previewImage(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			choose_image() {
				var self = this;
				if (self.image_array.length >= 4) {
					uni.showToast({
						icon: 'none',
						title: '最多上传4张图片',
						duration: 2000
					});
					return
				}
				uni.chooseImage({
					count: 4, //最大上传6张
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						if (res.tempFilePaths.length > 4) {
							uni.showToast({
								icon: 'none',
								title: '最多上传4张图片',
								duration: 2000
							});
						} else {
							uni.showLoading({
								title: '上传中'
							});
							for (let k = 0; k < res.tempFilePaths.length; k++) {
								// 上传评价图片
								uni.uploadFile({
									url: 'http://xjk.minshangkeji.com/index.php/api/upload/single',
									filePath: res.tempFilePaths[k],
									name: 'file',
									fileType: 'image',
									success: (uploadFileRes) => {
										uni.hideLoading();
										var data = JSON.parse(uploadFileRes.data);
										let url_href = data.data.filename
										self.image_array.push(url_href);
										if (self.image_array.length > 4) {
											self.image_array.length = 4
											uni.showToast({
												icon: 'none',
												title: '最多上传4张图片',
												duration: 2000
											});
										}
									}
								});
							}
						}
					}
				});
			},

			back() {
				uni.navigateBack({
					delta: 1,
				})
			},

		}
	}
</script>

<style lang="less">
	.opinionBox {
		width: 750rpx;
		background: white;
		position: relative;
		top: 120rpx;
	}

	.opinion {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: black;
		width: 680rpx;
		height: 300rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
		left: 35rpx;
	}

	.opinionImgBox {
		width: 680rpx;
		height: 90rpx;
		position: relative;
		left: 35rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.opinionFont {
		font-size: 26rpx;
		font-family: PingFangSCRegular;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
	}

	.opinionImgnum {
		font-size: 26rpx;
		font-family: PingFangSCRegular;
		font-weight: bold;
		color: rgba(142, 142, 142, 1);
	}

	.opimiom {
		width: 750rpx;
		height: 200rpx;
	}

	.submit {
		width: 680rpx;
		height: 90rpx;
		background: rgba(115, 34, 216, 1);
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(115, 34, 216, 0.3);
		border-radius: 20rpx;
		position: absolute;
		bottom: 30rpx;
		left: 35rpx;
		font-size: 38rpx;
		font-family: PingFangSCRegular;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.shangchuan {
		width: 150rpx;
		height: 150rpx;
		border: 1rpx solid #E6E6E6;
		padding: 20rpx;
		box-sizing: border-box;
		margin-left: 20rpx !important;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.pic_list {
		width: 150rpx;
		height: 150rpx;
	}

	.picstyle {
		display: flex;
		width: 750rpx;
		flex-wrap: wrap;
		padding: 15rpx;
	}
</style>
